<template>
  <div id="chartContainer">
    <div class="drop_input">
      <form>
        <template id="line">
          <el-select v-model="lineValue" placeholder="请选择产线" @change="getStationData(lineValue)" size="small"
                     style="width: 2rem;margin-right: 0.2rem">
            <el-option
                v-for="item in proline_data"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
        <template id="station">
          <el-select v-model="stationValue" placeholder="请选择工位" @change="getDeviceData(stationValue)" size="small"
                     style="margin-right: 0.2rem">
            <el-option
                v-for="item in station_data"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
        <template id="device">
          <el-select v-model="deviceValue" placeholder="请选择设备" size="small"
                     style="width: 2rem;">
            <el-option
                v-for="item in device_data"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </template>
        <div class="search_btn_char">
          <button id="search" @click="searchData" type="button">查询
          </button>
          <button id="reset" @click="onreset" type="button">重置</button>
        </div>
      </form>
    </div>
    <div id="bottomLeftChart"></div>
  </div>

</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      isShow: true,
      chart: null,
      proline_data: [],
      station_data: [],
      device_data: [],
      lineValue: '',
      stationValue: '',
      deviceValue: '',
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw('', '', '');
  },
  created() {
    this.$http.get("/opc/device/get_product_line").then(res => {
      if (res.data.code === 0) {
        this.proline_data = res.data.data
      }
    })
  },
  methods: {
    reload() {//局部刷新
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true
      })
    },
    onreset() {
      this.reload()
      this.lineValue = ''
      this.stationValue = ''
      this.deviceValue = ''
      this.station_data = []
      this.device_data = []
      this.draw('', '', '');
    },
    searchData() {
      this.draw(this.lineValue, this.stationValue, this.deviceValue);
    },
    async getStationData(lineValue) {
      this.stationValue = ""
      this.deviceValue = ""
      const resData = await this.$http.get("/opc/device/get_device_list", {
        params: {proLine: lineValue, stationNum: ''}
      });
      if (resData.data.code === 0) {
        this.station_data = resData.data.data
      }
    },
    async getDeviceData(staionValue) {
      const resData = await this.$http.get("/opc/device/get_device_list", {
        params: {proLine: this.lineValue, stationNum: staionValue}
      });
      if (resData.data.code === 0) {
        this.device_data = resData.data.data
      }
    },
    async draw(line_val, station_val, device_val) {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("bottomLeftChart"));
      const resData = await this.$http.get("/opc/consumeStatistic/list_month", {
        params: {proLine: line_val, stationNum: station_val, deviceCode: device_val}
      });
      let category = []
      let barData = []
      if (resData.data.code === 0) {
        category = resData.data.data.dayList
        barData = resData.data.data.list
      }
      let option = {
        title: {
          text: "",
          x: "center",
          y: 0,
          textStyle: {
            color: "#B4B4B4",
            fontSize: 16,
            fontWeight: "normal"
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(255,255,255,0.1)",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              backgroundColor: "#7B7DDC"
            }
          }
        },
        legend: {
          data: ["消耗数"],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "1%"
        },
        grid: {
          x: "4%",
          width: "95%",
          y: "16%"
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: {show: false},
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value} "
            },
            minInterval: 1,
          }
        ],
        series: [
          {
            name: "消耗数",
            type: "bar",
            barWidth: 25,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: "#956FD4"},
                  {offset: 1, color: "#3EACE5"}
                ])
              }
            },
            data: barData
          }
        ]
      };
      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>
